<script setup>
import {
    Document,
    User,
    Connection,
    ChatLineRound
} from '@element-plus/icons-vue'
import { useRouter } from "vue-router"
import { computed } from "vue"
// 引入 路由
const router = useRouter()
// 选择按钮高亮
const activeMap = {
    user: 1,
    CarouselManager: 2,
    ArticleManager: 3,
    CommentManager: 4,
}
// 选择按钮高亮
const active = computed(() => activeMap[router.currentRoute.value.name])
</script>
<template>
    <el-container>
        <el-aside width="250px">
            <el-menu active-text-color="#409EFF" :default-active="active">
                <RouterLink to="/background/user">
                    <el-menu-item :index="1">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>用户管理</span>
                    </el-menu-item>
                </RouterLink>
                <RouterLink to="/background/CarouselManager">
                <el-menu-item :index="2">
                    <el-icon>
                        <Connection />
                    </el-icon>
                    <span>首页轮播</span>
                </el-menu-item>
                </RouterLink>
                <RouterLink to="/background/ArticleManager">
                <el-menu-item :index="3">
                    <el-icon>
                        <Document />
                    </el-icon>
                    <span>文章管理</span>
                </el-menu-item>
                </RouterLink>
                <RouterLink to="/background/CommentManager">
                    <el-menu-item :index="4">
                        <el-icon>
                            <ChatLineRound />
                        </el-icon>
                    <span>评论管理</span>
                    </el-menu-item>
                </RouterLink>
                                <!-- <RouterLink to="/background/ApiTesting">
                    <el-menu-item index="2">
                        <el-icon><icon-menu /></el-icon>
                        <span>api管理</span>
                    </el-menu-item>
                </RouterLink> -->
            </el-menu>
        </el-aside>
        <el-main>
            <RouterView></RouterView>
        </el-main>
    </el-container>
</template>
<style scoped>
.el-menu {
    height: 100%;
}

.el-main {
    background-color: rgb(255, 255, 255);
}

.el-menu-item {
    display: flex;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
}

.el-menu-item span {
    margin-left: 15px;
}
</style>